// ----------------------------------------------- 实现基本的剪裁效果 ----------------------------------------------
// - 找到剪裁区的图片 （img#image）
let img = $('#image')
// - 设置配置项
let option = {
    // 纵横比(宽高比)
    aspectRatio: 1,   //正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
}
// - 调用cropper方法，创建剪裁区
img.cropper(option);



// ---------------------------------------------- 点击 “上传” 能够选择图片 ------------------------------------------

$('#b1').on('click', function () {
    $('#file').trigger('click')   //trigger() 方法触发被选元素的指定事件类型。
})





// -------------------------------------- 选择图片后，更换剪裁区的图片 ------------------------------------------------
$('#file').on('change', function () {
    let fileList = this.files; // 获取选择的文件列表
    if (fileList.length > 0) {
        // URL是一个内置对象，createObjectURL() 方法，专门为文件对象生成url
        // let url = URL.createObjectURL(文件对象);
        let url = URL.createObjectURL(fileList[0]);
        // 更换剪裁区的图片 （销毁剪裁框 --> 更换图片 --> 创建剪裁框）
        // image.cropper('destroy').attr('src',url).cropper(option)
        img.cropper('destroy').attr('src', url).cropper(option);
    }
})


// ------------------------------------------------- 点击确定，更换图片 ----------------------------------------------
$('#b2').on('click', function () {
     // 剪裁图片，得到canvas
    let canvas = img.cropper('getCroppedCanvas', { width: 30, height: 30 });
    console.log(canvas);
    // 把canvas转成base64格式 
    let base64 = canvas.toDataURL('img.jpeg', 0.3)
    
    $.ajax({
        type: 'post',
        data: {
            avatar:base64
        },
        url: '/my/user/avatar',
        success: function (res) {
            console.log(res);
            // 弹框提示
            layer.msg(res.message)
            // 判断
            if (res.status == 0) {
                // 更换成功？？？？调用父页面的函数，更新头像
                window.parent.getUserInfo()
            }
        }
    })
})